<template>
  <div class="param-main">
    <el-radio-group v-model="radio1" size="small" @change="scrollOn">
      <el-radio-button
        :label="item.name"
        v-for="(item, index) in letter"
        :key="index"
      ></el-radio-button>
    </el-radio-group>
    <div style="overflow: auto; height: calc(100% - 30px)">
      <div class="page_content">
        <div class="brand" v-for="item in brandsList" :key="item.id">
          <span @click="getCs(item)">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCarLetterList } from '@/api/carLine'
export default {
  name: 'applyMain',
  props: ['pageData'],
  components: {},
  data() {
    return {
      visible: false,
      radio1: '全部',
      rowData: {},
      title: '',
      letter: [],
      brandsList: [],
      brands: []
    }
  },
  watch: {},
  created() {
    this.letterOb = this.$route.query.data
      ? this.$route.query.data
      : {
          letterOb: {
            id: null,
            name: null,
            path: null
          }
        } //品牌对象 //品牌对象
    if (this.letterOb.letterOb.id) {
      this.radio1 = this.letterOb.letterOb.initial.charAt(0).toUpperCase()
      this.scrollOn()
    } else {
      this.radio1 = '全部'
      this.scrollOn()
    }
  },
  mounted() {
    for (var i = 0; i < 26; i++) {
      let op = {
        name: String.fromCharCode(65 + i),
        id: i
      }
      this.letter.push(op)
    }
    this.letter.unshift({
      name: '全部',
      id: ''
    })
    this.getBrandsList().then(() => {
      this.scrollOn()
    })
  },
  methods: {
    /**
     * 获取品牌列表信息
     */
    getBrandsList() {
      return new Promise((resolve) => {
        let data = {
          page: 1,
          size: 1000
        }
        getCarLetterList(data).then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.brands = data.content
            resolve()
          } else {
            this.$message.error(data)
          }
        })
      })
    },
    /**
     * 按字母分类数据
     */
    scrollOn() {
      this.brandsList = []
      if (this.radio1 != '全部') {
        this.brands.forEach((el) => {
          if (el.initial.charAt(0) == this.radio1) {
            this.brandsList.push(el)
          }
        })
      } else {
        this.brandsList = this.brands
      }
    },
    /**
     * 点击品牌跳转到车系页面
     */
    getCs(item) {
      let op = item
      op.path = '/product/vehicleModelPart'
      let data = {
        letterOb: op
      }
      this.$router.push({
        path: '/product/carSeries',
        query: {
          data: data
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.param-main {
  overflow:hidden ;
  .page_content {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    .brand {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      align-items: center;
      width: 15%;
      padding: 10px;
      cursor: pointer;
      span:focus {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        box-shadow: -1px 0 0 0 #409eff;
      }
      span:hover,
      i:hover {
        color: #409eff;
        background-color: #fff;
        border-color: #409eff;
      }
      .brand_del {
        margin-left: 10px;
      }
    }
  }
}
</style>
